<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<style>
    :root {
        --primary: #4361ee;
        --primary-light: #eef0ff;
        --primary-dark: #3a0ca3;
        --secondary: #f72585;
        --success: #4cc9f0;
        --warning: #f72585;
        --dark: #1d3557;
        --light: #f8f9fa;
        --gray: #6c757d;
        --border: #dee2e6;
        --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
    }

    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background-color: #f5f7ff;
        color: var(--dark);
        line-height: 1.6;
    }

    /* 路径导航 */
    .breadcrumb {
        margin: 1.5rem 0;
        background-color: transparent;
        padding: 0;
        font-size: 0.9rem;
    }

    .breadcrumb .breadcrumb-item a {
        color: var(--gray);
        text-decoration: none;
    }

    .breadcrumb .breadcrumb-item a:hover {
        color: var(--primary);
        text-decoration: underline;
    }

    .breadcrumb .breadcrumb-item.active {
        color: var(--dark);
    }

    /* 活动头部样式 */
    .campaign-header {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        border-radius: 12px;
        color: white;
        padding: 2rem;
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
    }

    .campaign-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        opacity: 0.4;
    }

    .campaign-header .campaign-title {
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 1rem;
        position: relative;
    }

    .campaign-header .campaign-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
        position: relative;
    }

    .campaign-header .campaign-meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .campaign-header .campaign-description {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
        max-width: 800px;
        position: relative;
    }

    .campaign-header .campaign-stats {
        display: flex;
        gap: 2rem;
        margin-bottom: 1.5rem;
        position: relative;
    }

    .campaign-header .campaign-stat {
        text-align: center;
    }

    .campaign-header .stat-value {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }

    .campaign-header .stat-label {
        font-size: 0.9rem;
        opacity: 0.9;
    }

    .campaign-header .campaign-actions {
        display: flex;
        gap: 1rem;
        position: relative;
    }

    /* 文章列表样式 */
    .section-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid var(--primary-light);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .section-title i {
        color: var(--primary);
    }

    .articles-container {
        background-color: white;
        border-radius: 12px;
        box-shadow: var(--shadow);
        overflow: hidden;
        margin-bottom: 2rem;
    }

    .articles-header {
        padding: 1rem 1.5rem;
        background-color: var(--primary-light);
        border-bottom: 1px solid var(--border);
    }

    .articles-header .articles-filters {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .articles-header .view-controls {
        display: flex;
        gap: 0.5rem;
    }

    .articles-header .view-btn {
        background-color: white;
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 0.3rem 0.75rem;
        color: var(--gray);
        transition: all 0.2s;
    }

    .articles-header .view-btn:hover, .articles-header .view-btn.active {
        background-color: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    .articles-header .filter-sort {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .articles-header .filter-label {
        font-weight: 500;
        color: var(--dark);
    }

    /* 列表视图样式 */
    .articles-list-view .article-item {
        padding: 1.5rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        gap: 1.5rem;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .articles-list-view .article-item:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
    }

    .articles-list-view .article-item:last-child {
        border-bottom: none;
    }

    .articles-list-view .article-image {
        width: 120px;
        height: 120px;
        border-radius: 8px;
        object-fit: cover;
        flex-shrink: 0;
    }

    .articles-list-view .article-content {
        flex: 1;
    }

    /* 网格视图样式 */
    .articles-grid-view {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .articles-grid-view .article-item {
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
        display: flex;
        flex-direction: column;
    }

    .articles-grid-view .article-item:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-hover);
    }

    .articles-grid-view .article-image {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }

    .articles-grid-view .article-content {
        padding: 1rem;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .articles-grid-view .article-rank {
        margin: -1rem -1rem 1rem -1rem;
        width: auto;
        height: auto;
        border-radius: 0;
        padding: 0.25rem 1rem;
        justify-content: flex-start;
    }

    /* 卡片视图样式 */
    .articles-card-view {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .articles-card-view .article-item {
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: transform 0.2s, box-shadow 0.2s;
        display: flex;
    }

    .articles-card-view .article-item:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
    }

    .articles-card-view .article-image {
        width: 30%;
        object-fit: cover;
    }

    .articles-card-view .article-content {
        width: 70%;
        padding: 1.5rem;
    }

    @media (max-width: 768px) {
        .articles-card-view .article-item {
            flex-direction: column;
        }

        .articles-card-view .article-image,
        .articles-card-view .article-content {
            width: 100%;
        }

        .articles-card-view .article-image {
            height: 200px;
        }
    }

    /* 通用文章样式 */
    .article-item .article-rank {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background-color: var(--primary-light);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    .article-item .article-rank.top-1 {
        background-color: #fff3cd;
        color: #fd7e14;
    }

    .article-item .article-rank.top-2 {
        background-color: #e9ecef;
        color: #6c757d;
    }

    .article-item .article-rank.top-3 {
        background-color: #fff3cd;
        color: #d97706;
    }

    .article-item .article-title {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--dark);
        text-decoration: none;
        transition: color 0.2s;
    }

    .article-item .article-title:hover {
        color: var(--primary);
    }

    .article-item .article-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 0.75rem;
        font-size: 0.9rem;
        color: var(--gray);
    }

    .article-item .article-author {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .article-item .author-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
    }

    .article-item .article-excerpt {
        color: var(--gray);
        font-size: 0.95rem;
        margin-bottom: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .article-item .article-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .article-item .article-tag {
        background-color: var(--primary-light);
        color: var(--primary);
        padding: 0.2rem 0.75rem;
        border-radius: 20px;
        font-size: 0.8rem;
        text-decoration: none;
    }

    .article-item .article-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
    }

    .article-item .votes-count {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        color: var(--primary);
    }

    .article-item .vote-btn {
        background-color: var(--primary);
        color: white;
        border: none;
        padding: 0.4rem 1.2rem;
        border-radius: 6px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: background-color 0.2s;
    }

    .article-item .vote-btn:hover {
        background-color: var(--primary-dark);
    }

    .article-item .vote-btn.voted {
        background-color: var(--success);
    }

    /* 投票进度样式 */
    .article-item .voting-progress {
        margin-top: 0.5rem;
        height: 8px;
        background-color: #e9ecef;
        border-radius: 4px;
        overflow: hidden;
    }

    .article-item .progress-bar {
        height: 100%;
        background-color: var(--primary);
        border-radius: 4px;
        transition: width 0.5s ease;
    }

    /* 统计图表区域 */
    .stats-container {
        background-color: white;
        border-radius: 12px;
        box-shadow: var(--shadow);
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .stats-container .charts-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .stats-container .chart-wrapper {
        height: 300px;
        position: relative;
    }

    /* 模态框样式 */
    .modal-content {
        border-radius: 12px;
        border: none;
        box-shadow: var(--shadow-hover);
    }

    .modal-content .modal-header {
        border-bottom: 1px solid var(--border);
        padding: 1.25rem 1.5rem;
    }

    .modal-content .modal-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--dark);
    }

    .modal-content .modal-body {
        padding: 1.5rem;
    }

    .modal-content .modal-footer {
        border-top: 1px solid var(--border);
        padding: 1rem 1.5rem;
    }

    .modal-content .my-articles-list {
        max-height: 400px;
        overflow-y: auto;
        margin-bottom: 1rem;
    }

    .modal-content .my-article-option {
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        margin-bottom: 0.75rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .modal-content .my-article-option:hover {
        border-color: var(--primary);
        background-color: var(--primary-light);
    }

    .modal-content .my-article-option.selected {
        border-color: var(--primary);
        background-color: var(--primary-light);
        position: relative;
    }

    .modal-content .my-article-option.selected::after {
        content: '\f00c';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        color: var(--primary);
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    .modal-content .no-articles-message {
        text-align: center;
        padding: 2rem;
        color: var(--gray);
    }

    .modal-content .no-articles-message i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    /* 分页样式 */
    .pagination-container {
        display: flex;
        justify-content: center;
        margin: 2rem 0;
    }

    .pagination-container .page-link {
        color: var(--primary);
        border: 1px solid var(--border);
        margin: 0 0.25rem;
        border-radius: 6px;
        transition: all 0.2s;
    }

    .pagination-container .page-link:hover {
        color: var(--primary-dark);
        background-color: var(--primary-light);
        border-color: var(--primary);
    }

    .pagination-container .page-link.active {
        background-color: var(--primary);
        border-color: var(--primary);
        color: white;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
        .stats-container .charts-grid {
            grid-template-columns: 1fr;
        }

        .campaign-header .campaign-stats {
            flex-wrap: wrap;
        }
    }

    @media (max-width: 768px) {
        .search-container {
            max-width: 100%;
            margin: 1rem 0;
        }

        .campaign-header .campaign-title {
            font-size: 1.8rem;
        }

        .campaign-header .campaign-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .article-item .article-actions {
            flex-direction: column;
            align-items: stretch;
            gap: 1rem;
        }

        .article-item .vote-btn {
            width: 100%;
            justify-content: center;
        }

        .articles-header .filter-sort {
            flex-wrap: wrap;
        }
    }
</style>


<!-- 主内容区 -->
<div class="container py-5">
    <!-- 路径导航 -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">首页</a></li>
            <li class="breadcrumb-item"><a href="#">活动</a></li>
            <li class="breadcrumb-item active" aria-current="page">2023年度最佳技术博客评选</li>
        </ol>
    </nav>

    <!-- 活动头部 -->
    <div class="campaign-header">
        <h1 class="campaign-title">2023年度最佳技术博客评选</h1>

        <div class="campaign-meta">
            <div class="campaign-meta-item">
                <i class="fas fa-calendar-alt"></i>
                <span>2023-11-01 至 2023-11-30</span>
            </div>
            <div class="campaign-meta-item">
                <i class="fas fa-user-friends"></i>
                <span>主办方: 多元论坛官方</span>
            </div>
            <div class="campaign-meta-item">
                <i class="fas fa-tags"></i>
                <span>技术博客, 年度评选, 前端开发</span>
            </div>
        </div>

        <p class="campaign-description">
            2023年度最佳技术博客评选活动正式启动！无论你是技术专家还是编程爱好者，都可以推荐或展示自己的技术博客，参与评选。活动将根据社区投票和专家评审，评选出年度最佳技术博客，获奖者将获得丰厚奖励和社区推广机会。
        </p>

        <div class="campaign-stats">
            <div class="campaign-stat">
                <div class="stat-value">128</div>
                <div class="stat-label">参与博客</div>
            </div>
            <div class="campaign-stat">
                <div class="stat-value">5,342</div>
                <div class="stat-label">累计投票</div>
            </div>
            <div class="campaign-stat">
                <div class="stat-value">18</div>
                <div class="stat-label">剩余天数</div>
            </div>
        </div>

        <div class="campaign-actions">
            <button type="button" class="btn btn-light btn-lg" data-bs-toggle="modal"
                    data-bs-target="#participateModal">
                <i class="fas fa-plus-circle"></i> 参与评选
            </button>
            <button class="btn btn-outline-light btn-lg">
                <i class="fas fa-share-alt"></i> 分享活动
            </button>
        </div>
    </div>

    <!-- 统计图表区域 -->
    <div class="stats-container">
        <h2 class="section-title"><i class="fas fa-chart-line"></i> 投票数据统计</h2>
        <div class="charts-grid">
            <div class="chart-wrapper">
                <canvas id="votingTrendChart"></canvas>
            </div>
            <div class="chart-wrapper">
                <canvas id="categoryDistributionChart"></canvas>
            </div>
        </div>
    </div>

    <!-- 文章列表区域 -->
    <h2 class="section-title"><i class="fas fa-list-alt"></i> 参与评选的博客文章</h2>

    <div class="articles-container">
        <div class="articles-header">
            <div class="articles-filters">
                <div class="filter-sort">
                    <span class="filter-label">排序方式:</span>
                    <select class="form-select form-select-sm" id="sortSelect">
                        <option value="votes">按票数排序</option>
                        <option value="latest">最新参与</option>
                        <option value="trending">热门趋势</option>
                    </select>

                    <span class="filter-label ms-3">分类:</span>
                    <select class="form-select form-select-sm" id="categorySelect">
                        <option value="all">全部</option>
                        <option value="frontend">前端开发</option>
                        <option value="backend">后端开发</option>
                        <option value="mobile">移动开发</option>
                        <option value="ai">人工智能</option>
                        <option value="devops">DevOps</option>
                    </select>
                </div>

                <div class="view-controls">
                    <span class="filter-label">视图:</span>
                    <button class="view-btn active" data-view="list" title="列表视图">
                        <i class="fas fa-list"></i>
                    </button>
                    <button class="view-btn" data-view="grid" title="网格视图">
                        <i class="fas fa-th"></i>
                    </button>
                    <button class="view-btn" data-view="card" title="卡片视图">
                        <i class="fas fa-grip-horizontal"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 文章列表容器 - 默认为列表视图 -->
        <div class="articles-list-view" id="articlesContainer">
            <!-- 文章1 -->
            <div class="article-item">
                <div class="article-rank top-1">1</div>
                <img src="https://picsum.photos/400/300?random=10" alt="现代JavaScript开发指南" class="article-image">
                <div class="article-content">
                    <h3><a href="#" class="article-title">现代JavaScript开发指南：从基础到高级实践</a></h3>
                    <div class="article-meta">
                        <div class="article-author">
                            <img src="https://picsum.photos/100/100?random=1" alt="李前端" class="author-avatar">
                            <span>李前端</span>
                        </div>
                        <div class="article-date"><i class="far fa-calendar"></i> 2023-10-15</div>
                        <div class="article-category"><i class="fas fa-folder"></i> 前端开发</div>
                    </div>
                    <p class="article-excerpt">
                        本文详细介绍了现代JavaScript开发的核心概念和最佳实践，从ES6+新特性到异步编程模式，再到模块化开发和测试策略，全方位覆盖JavaScript开发的各个方面。</p>
                    <div class="article-tags">
                        <a href="#" class="article-tag">JavaScript</a>
                        <a href="#" class="article-tag">ES6</a>
                        <a href="#" class="article-tag">前端开发</a>
                    </div>
                    <div class="voting-progress">
                        <div class="progress-bar" style="width: 85%"></div>
                    </div>
                    <div class="article-actions">
                        <div class="votes-count">
                            <i class="fas fa-vote-yea"></i>
                            <span>856 票</span>
                        </div>
                        <button class="vote-btn voted">
                            <i class="fas fa-check"></i>
                            已投票
                        </button>
                    </div>
                </div>
            </div>

            <!-- 文章2 -->
            <div class="article-item">
                <div class="article-rank top-2">2</div>
                <img src="https://picsum.photos/400/300?random=11" alt="React性能优化实战" class="article-image">
                <div class="article-content">
                    <h3><a href="#" class="article-title">React性能优化实战：从理论到实践</a></h3>
                    <div class="article-meta">
                        <div class="article-author">
                            <img src="https://picsum.photos/100/100?random=2" alt="王React" class="author-avatar">
                            <span>王React</span>
                        </div>
                        <div class="article-date"><i class="far fa-calendar"></i> 2023-10-10</div>
                        <div class="article-category"><i class="fas fa-folder"></i> 前端开发</div>
                    </div>
                    <p class="article-excerpt">
                        深入探讨React应用性能优化的各种技巧和方法，从虚拟DOM原理到组件优化，从状态管理到代码分割，通过实际案例讲解如何构建高性能的React应用。</p>
                    <div class="article-tags">
                        <a href="#" class="article-tag">React</a>
                        <a href="#" class="article-tag">性能优化</a>
                        <a href="#" class="article-tag">前端框架</a>
                    </div>
                    <div class="voting-progress">
                        <div class="progress-bar" style="width: 72%"></div>
                    </div>
                    <div class="article-actions">
                        <div class="votes-count">
                            <i class="fas fa-vote-yea"></i>
                            <span>721 票</span>
                        </div>
                        <button class="vote-btn">
                            <i class="far fa-thumbs-up"></i>
                            投票
                        </button>
                    </div>
                </div>
            </div>

            <!-- 文章3 -->
            <div class="article-item">
                <div class="article-rank top-3">3</div>
                <img src="https://picsum.photos/400/300?random=12" alt="Docker容器化部署指南" class="article-image">
                <div class="article-content">
                    <h3><a href="#" class="article-title">Docker容器化部署指南：从入门到精通</a></h3>
                    <div class="article-meta">
                        <div class="article-author">
                            <img src="https://picsum.photos/100/100?random=3" alt="张运维" class="author-avatar">
                            <span>张运维</span>
                        </div>
                        <div class="article-date"><i class="far fa-calendar"></i> 2023-10-05</div>
                        <div class="article-category"><i class="fas fa-folder"></i> DevOps</div>
                    </div>
                    <p class="article-excerpt">全面介绍Docker容器化技术的核心概念和实践方法，从基本命令到Docker
                        Compose，从镜像优化到容器编排，帮助开发者掌握现代化的应用部署方式。</p>
                    <div class="article-tags">
                        <a href="#" class="article-tag">Docker</a>
                        <a href="#" class="article-tag">容器化</a>
                        <a href="#" class="article-tag">DevOps</a>
                    </div>
                    <div class="voting-progress">
                        <div class="progress-bar" style="width: 68%"></div>
                    </div>
                    <div class="article-actions">
                        <div class="votes-count">
                            <i class="fas fa-vote-yea"></i>
                            <span>683 票</span>
                        </div>
                        <button class="vote-btn">
                            <i class="far fa-thumbs-up"></i>
                            投票
                        </button>
                    </div>
                </div>
            </div>

            <!-- 文章4 -->
            <div class="article-item">
                <div class="article-rank">4</div>
                <img src="https://picsum.photos/400/300?random=13" alt="Python数据分析实战" class="article-image">
                <div class="article-content">
                    <h3><a href="#" class="article-title">Python数据分析实战：从数据获取到可视化</a></h3>
                    <div class="article-meta">
                        <div class="article-author">
                            <img src="https://picsum.photos/100/100?random=4" alt="刘数据" class="author-avatar">
                            <span>刘数据</span>
                        </div>
                        <div class="article-date"><i class="far fa-calendar"></i> 2023-09-28</div>
                        <div class="article-category"><i class="fas fa-folder"></i> 数据分析</div>
                    </div>
                    <p class="article-excerpt">
                        使用Python进行数据分析的实战指南，涵盖Pandas、NumPy、Matplotlib等核心库的使用方法，通过实际案例讲解数据清洗、分析和可视化的完整流程。</p>
                    <div class="article-tags">
                        <a href="#" class="article-tag">Python</a>
                        <a href="#" class="article-tag">数据分析</a>
                        <a href="#" class="article-tag">可视化</a>
                    </div>
                    <div class="voting-progress">
                        <div class="progress-bar" style="width: 55%"></div>
                    </div>
                    <div class="article-actions">
                        <div class="votes-count">
                            <i class="fas fa-vote-yea"></i>
                            <span>552 票</span>
                        </div>
                        <button class="vote-btn">
                            <i class="far fa-thumbs-up"></i>
                            投票
                        </button>
                    </div>
                </div>
            </div>

            <!-- 文章5 -->
            <div class="article-item">
                <div class="article-rank">5</div>
                <img src="https://picsum.photos/400/300?random=14" alt="Flutter跨平台开发" class="article-image">
                <div class="article-content">
                    <h3><a href="#" class="article-title">Flutter跨平台开发：一次编写，多端运行</a></h3>
                    <div class="article-meta">
                        <div class="article-author">
                            <img src="https://picsum.photos/100/100?random=5" alt="陈移动" class="author-avatar">
                            <span>陈移动</span>
                        </div>
                        <div class="article-date"><i class="far fa-calendar"></i> 2023-09-20</div>
                        <div class="article-category"><i class="fas fa-folder"></i> 移动开发</div>
                    </div>
                    <p class="article-excerpt">
                        详细介绍Flutter跨平台开发框架的使用方法和最佳实践，从环境搭建到UI组件，从状态管理到原生交互，帮助开发者快速构建高性能的跨平台应用。</p>
                    <div class="article-tags">
                        <a href="#" class="article-tag">Flutter</a>
                        <a href="#" class="article-tag">跨平台</a>
                        <a href="#" class="article-tag">移动开发</a>
                    </div>
                    <div class="voting-progress">
                        <div class="progress-bar" style="width: 48%"></div>
                    </div>
                    <div class="article-actions">
                        <div class="votes-count">
                            <i class="fas fa-vote-yea"></i>
                            <span>487 票</span>
                        </div>
                        <button class="vote-btn">
                            <i class="far fa-thumbs-up"></i>
                            投票
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li class="page-item"><a class="page-link active" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">4</a></li>
                <li class="page-item"><a class="page-link" href="#">5</a></li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

<!-- 参与评选模态框 -->
<div class="modal fade" id="participateModal" tabindex="-1" aria-labelledby="participateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="participateModalLabel">选择你的文章参与评选</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="mb-4">请从你的文章中选择一篇参与本次评选活动，每个用户限参与一次。</p>

                <div class="my-articles-list">
                    <!-- 我的文章1 -->
                    <div class="my-article-option" data-article-id="101">
                        <h5 class="mb-2">Tailwind CSS从入门到精通：构建现代UI的实用指南</h5>
                        <div class="article-meta mb-2">
                            <span><i class="far fa-calendar"></i> 2023-10-25</span>
                            <span class="ms-3"><i class="fas fa-folder"></i> 前端开发</span>
                            <span class="ms-3"><i class="far fa-eye"></i> 1,243 阅读</span>
                        </div>
                        <p class="article-excerpt mb-0">详细介绍Tailwind
                            CSS的核心概念和使用方法，从基础安装到高级配置，从响应式设计到自定义组件，帮助开发者快速掌握这一流行的CSS框架。</p>
                    </div>

                    <!-- 我的文章2 -->
                    <div class="my-article-option" data-article-id="102">
                        <h5 class="mb-2">TypeScript高级类型系统详解与实战</h5>
                        <div class="article-meta mb-2">
                            <span><i class="far fa-calendar"></i> 2023-10-18</span>
                            <span class="ms-3"><i class="fas fa-folder"></i> 前端开发</span>
                            <span class="ms-3"><i class="far fa-eye"></i> 987 阅读</span>
                        </div>
                        <p class="article-excerpt mb-0">
                            深入探讨TypeScript的高级类型特性，包括泛型、条件类型、映射类型等，通过实际案例讲解如何利用TypeScript的类型系统构建更健壮的应用。</p>
                    </div>

                    <!-- 我的文章3 -->
                    <div class="my-article-option" data-article-id="103">
                        <h5 class="mb-2">现代前端工程化实践：从开发到部署的完整流程</h5>
                        <div class="article-meta mb-2">
                            <span><i class="far fa-calendar"></i> 2023-10-10</span>
                            <span class="ms-3"><i class="fas fa-folder"></i> 前端工程化</span>
                            <span class="ms-3"><i class="far fa-eye"></i> 1,562 阅读</span>
                        </div>
                        <p class="article-excerpt mb-0">
                            介绍现代前端工程化的完整实践方案，包括代码规范、模块化开发、构建工具、自动化测试和CI/CD流程，帮助团队提升开发效率和代码质量。</p>
                    </div>
                </div>

                <div class="form-group mt-4">
                    <label for="articleUrl" class="form-label">或者输入文章链接</label>
                    <input type="url" class="form-control" id="articleUrl"
                           placeholder="https://example.com/your-article">
                    <div class="form-text">如果你的文章发布在其他平台，可以直接输入链接</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submitParticipation">确认参与</button>
            </div>
        </div>
    </div>
</div>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		// 初始化投票趋势图表
		const votingTrendCtx = document.getElementById('votingTrendChart').getContext('2d');
		const votingTrendChart = new Chart(votingTrendCtx, {
			type: 'line',
			data: {
				labels: ['11/01', '11/05', '11/10', '11/15', '11/20', '11/25', '今天'],
				datasets: [{
					label: '总投票数',
					data: [1250, 2100, 2850, 3500, 4200, 4900, 5342],
					borderColor: '#4361ee',
					backgroundColor: 'rgba(67, 97, 238, 0.1)',
					tension: 0.3,
					fill: true
				}]
			},
			options: {
				responsive: true,
				maintainAspectRatio: false,
				plugins: {
					title: {
						display: true,
						text: '投票趋势'
					},
					tooltip: {
						mode: 'index',
						intersect: false
					}
				},
				scales: {
					y: {
						beginAtZero: true,
						grid: {
							drawBorder: false
						}
					},
					x: {
						grid: {
							display: false
						}
					}
				}
			}
		});

		// 初始化分类分布图表
		const categoryDistributionCtx = document.getElementById('categoryDistributionChart').getContext('2d');
		const categoryDistributionChart = new Chart(categoryDistributionCtx, {
			type: 'doughnut',
			data: {
				labels: ['前端开发', '后端开发', '移动开发', '人工智能', 'DevOps', '其他'],
				datasets: [{
					data: [35, 25, 15, 10, 10, 5],
					backgroundColor: [
						'#4361ee',
						'#3f37c9',
						'#4cc9f0',
						'#4895ef',
						'#4cc9f0',
						'#f72585'
					],
					borderWidth: 0
				}]
			},
			options: {
				responsive: true,
				maintainAspectRatio: false,
				plugins: {
					title: {
						display: true,
						text: '文章分类分布'
					}
				},
				cutout: '65%'
			}
		});

		// 视图切换功能
		const viewButtons = document.querySelectorAll('.view-btn');
		const articlesContainer = document.getElementById('articlesContainer');

		viewButtons.forEach(button => {
			button.addEventListener('click', function () {
				// 移除所有按钮的活跃状态
				viewButtons.forEach(btn => btn.classList.remove('active'));
				// 添加当前按钮的活跃状态
				this.classList.add('active');

				// 获取要切换的视图类型
				const viewType = this.getAttribute('data-view');

				// 移除所有视图类
				articlesContainer.classList.remove('articles-list-view', 'articles-grid-view', 'articles-card-view');
				// 添加选中的视图类
				articlesContainer.classList.add(`articles-${viewType}-view`);
			});
		});

		// 文章选择功能
		const articleOptions = document.querySelectorAll('.my-article-option');
		articleOptions.forEach(option => {
			option.addEventListener('click', function () {
				// 移除其他选项的选中状态
				articleOptions.forEach(opt => opt.classList.remove('selected'));
				// 添加当前选项的选中状态
				this.classList.add('selected');
				// 清空URL输入框
				document.getElementById('articleUrl').value = '';
			});
		});

		// URL输入框交互
		const articleUrlInput = document.getElementById('articleUrl');
		articleUrlInput.addEventListener('focus', function () {
			// 移除所有选项的选中状态
			articleOptions.forEach(opt => opt.classList.remove('selected'));
		});

		// 提交参与
		const submitParticipationBtn = document.getElementById('submitParticipation');
		submitParticipationBtn.addEventListener('click', function () {
			// 获取选中的文章
			const selectedArticle = document.querySelector('.my-article-option.selected');
			const articleUrl = articleUrlInput.value.trim();

			let articleData = null;

			if (selectedArticle) {
				// 选中了已有文章
				const articleId = selectedArticle.getAttribute('data-article-id');
				const articleTitle = selectedArticle.querySelector('h5').textContent;
				articleData = {
					type: 'existing',
					id: articleId,
					title: articleTitle
				};
			} else if (articleUrl) {
				// 输入了文章URL
				if (!isValidUrl(articleUrl)) {
					alert('请输入有效的URL地址');
					return;
				}
				articleData = {
					type: 'external',
					url: articleUrl
				};
			} else {
				// 未选择任何文章
				alert('请选择一篇文章或输入文章链接');
				return;
			}

			// 模拟AJAX提交
			submitParticipation(articleData);
		});

		// 投票按钮交互
		const voteButtons = document.querySelectorAll('.vote-btn:not(.voted)');
		voteButtons.forEach(button => {
			button.addEventListener('click', function () {
				const articleItem = this.closest('.article-item');
				const votesCountEl = articleItem.querySelector('.votes-count span');
				const progressBar = articleItem.querySelector('.progress-bar');

				// 更新按钮状态
				this.classList.add('voted');
				this.innerHTML = '<i class="fas fa-check"></i> 已投票';

				// 更新票数
				let currentVotes = parseInt(votesCountEl.textContent);
				votesCountEl.textContent = (currentVotes + 1) + ' 票';

				// 更新进度条
				let currentProgress = parseInt(progressBar.style.width);
				progressBar.style.width = (currentProgress + 5) + '%';

				// 模拟AJAX提交投票
				const articleTitle = articleItem.querySelector('.article-title').textContent;
				submitVote(articleTitle);
			});
		});

		// 排序和筛选交互
		document.getElementById('sortSelect').addEventListener('change', function () {
			const sortBy = this.value;
			// 模拟排序
			alert(`已按${this.options[this.selectedIndex].text}排序`);
			// 实际应用中，这里应该发送AJAX请求获取排序后的文章列表
		});

		document.getElementById('categorySelect').addEventListener('change', function () {
			const category = this.value;
			// 模拟筛选
			alert(`已筛选${this.options[this.selectedIndex].text}分类`);
			// 实际应用中，这里应该发送AJAX请求获取筛选后的文章列表
		});

		// 辅助函数：验证URL
		function isValidUrl(url) {
			try {
				new URL(url);
				return true;
			} catch (e) {
				return false;
			}
		}

		// 模拟提交参与
		function submitParticipation(articleData) {
			// 显示加载状态
			submitParticipationBtn.disabled = true;
			submitParticipationBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> 提交中...';

			// 模拟AJAX请求
			setTimeout(() => {
				// 恢复按钮状态
				submitParticipationBtn.disabled = false;
				submitParticipationBtn.innerHTML = '确认参与';

				// 关闭模态框
				const modal = bootstrap.Modal.getInstance(document.getElementById('participateModal'));
				modal.hide();

				// 显示成功消息
				alert('恭喜！你的文章已成功参与本次评选活动。');
			}, 1500);
		}

		// 模拟提交投票
		function submitVote(articleTitle) {
			// 实际应用中，这里应该发送AJAX请求提交投票
			console.log(`已为文章"${articleTitle}"投票`);
		}
	});
</script>

    
